import React, { PureComponent } from 'react';

import moment from 'moment';
import { DatePicker, Form, Button } from 'antd';
// import { get as _get } from 'object-path';
import styles from './datePicker.less';

// TODO
// 使用方法
// mode:year/quarter/month/week 默认选项
/* <DataPick2 onSearch={(v)=>{this.handleSearch(v)}} mode="week" /> */
// 返回 value.format('YYYY-MM-DD')

@Form.create()
class DataPick2 extends PureComponent {
    state = {
        mode: this.props.mode,
        defaultOption: [
            {
                en: 'year',
                cn: '今年'
            },
            {
                en: 'quarter',
                cn: '本季度'
            },
            {
                en: 'month',
                cn: '本月'
            },
            {
                en: 'week',
                cn: '本周'
            }
        ],
        dateOption: this.props.dateOption,
        data: {
            start: '2000-01-01',
            end: '2000-12-31'
        }
    };

    componentDidMount() {
        const { defaultDate } = this.props;
        if (defaultDate) {
            const newData = {
                start: moment(defaultDate)
                    .startOf('month')
                    .format('YYYY-MM-DD'),
                end: moment(defaultDate)
                    .endOf('month')
                    .format('YYYY-MM-DD')
            };
            this.setState({
                data: newData,
                mode: ''
            });
        } else {
            this.changeTime(this.state.mode);
        }
    }

    componentWillReceiveProps(nextProps) {
        // 任何时候props.mode.
        if (nextProps.mode !== this.props.mode) {
            this.setState({
                mode: nextProps.mode,
                dateOption: nextProps.dateOption
            });
        }
    }

    // ui日期切换选择
    changeTime = type => {
        if (type === 'year') {
            this.getFirstAndLastYear();
        } else if (type === 'quarter') {
            this.getFirstAndLastquarter();
        } else if (type === 'month') {
            this.getFirstAndLastMonthDay();
        } else if (type === 'week') {
            this.getFirstAndLasWeek();
        }
        this.setState({ mode: type });
    };

    // 获取本年开始时间和结束时间
    getFirstAndLastYear = () => {
        const arr = [
            moment(
                moment()
                    .year(moment().year())
                    .startOf('year')
                    .format('YYYY-MM-DD')
            ),
            moment(
                moment()
                    .year(moment().year())
                    .endOf('year')
                    .format('YYYY-MM-DD')
            )
        ];
        this.props.form.setFieldsValue({
            times: arr
        });
    };

    // 获取季度第一天和最后一天
    getFirstAndLastquarter = () => {
        const arr = [
            moment(
                moment()
                    .quarter(moment().quarter())
                    .startOf('quarter')
                    .format('YYYY-MM-DD')
            ),
            moment(
                moment()
                    .quarter(moment().quarter())
                    .endOf('quarter')
                    .format('YYYY-MM-DD')
            )
        ];
        this.props.form.setFieldsValue({
            times: arr
        });
    };

    // 获取当月最后一天日期和第一天
    getFirstAndLastMonthDay = () => {
        const arr = [
            moment(
                moment()
                    .month(moment().month())
                    .startOf('month')
                    .format('YYYY-MM-DD')
            ),
            moment()
        ];
        this.props.form.setFieldsValue({
            times: arr
        });
    };

    // 获取本周开始时间和结束时间
    getFirstAndLasWeek = () => {
        const arr = [
            moment(
                moment()
                    .week(moment().week())
                    .startOf('week')
                    .format('YYYY-MM-DD')
            ),
            moment(
                moment()
                    .week(moment().week())
                    .endOf('week')
                    .format('YYYY-MM-DD')
            )
        ];
        this.props.form.setFieldsValue({
            times: arr
        });
    };

    datapickChange = () => {
        this.setState({
            mode: ''
        });
    };

    handleSearch = e => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                // console.log('Received values of form: ', values);
                this.props.onSearch(values.times);
            }
        });
    };

    initTabl = () => {
        const { mode, dateOption, defaultOption } = this.state;
        const day = dateOption || defaultOption;
        return (
            <ul>
                {day.map(v => (
                    <li
                        key={v.en}
                        className={mode === v.en ? styles.active : ''}
                        onClick={() => this.changeTime(v.en)}
                    >
                        {v.cn}
                    </li>
                ))}
            </ul>
        );
    };

    render() {
        const { data } = this.state;
        const { RangePicker } = DatePicker;

        const {
            form: { getFieldDecorator }
        } = this.props;
        return (
            <Form
                layout="inline"
                className={styles.uiDataPick}
                onSubmit={this.handleSearch}
            >
                {this.initTabl()}
                <Form.Item>
                    {getFieldDecorator('times', {
                        initialValue: [
                            moment(data.start, 'YYYY/MM/DD'),
                            moment(data.end, 'YYYY/MM/DD')
                        ]
                    })(
                        <RangePicker
                            allowClear={false}
                            onChange={(v, n) => {
                                this.datapickChange(v, n);
                            }}
                        />
                    )}
                </Form.Item>

                <Form.Item>
                    <Button type="primary" htmlType="submit">
                        查询
                    </Button>
                </Form.Item>
            </Form>
        );
    }
}
export default DataPick2;
